<template>
    <transition name="fadeInUp">
        <div v-if="show" class="edit-popup" @click.stop>
            <slot></slot>
            <a href="javascript:" class="c-btn sm" @click="confirm">确定</a>
            <a href="javascript:" class="c-btn sm transprant" @click="cancel">取消</a>
            <span class="arrow" :style="{left: arrowLeft}"></span>
        </div>
    </transition>
</template>

<script>
    export default {
        name: 'editPopup',
        data(){
            return {
                show: false,
                arrowLeft: '50%',
            }
        },
        methods: {
            showToTarget(target){// 供父组件调用
                this.show = true;
                let left = target.getBoundingClientRect().left;
                let windowWidth = document.body.clientWidth;
                this.$nextTick(function () {
                    this.$el.style.top = target.getBoundingClientRect().top - this.$el.offsetHeight - 16 + 'px';
                    if(windowWidth < left + this.$el.offsetWidth){// 靠左
                        this.$el.style.left = 'auto';
                        this.$el.style.right = '0';
                        this.arrowLeft = this.$el.offsetWidth + target.offsetWidth/2 - (windowWidth - target.getBoundingClientRect().left ) - 10 + 'px';
                    }else{// 靠右
                        this.$el.style.right = 'auto';
                        this.$el.style.left = left - this.$el.offsetWidth/2 + target.offsetWidth/2 + 'px';
                        this.arrowLeft = this.$el.offsetWidth/2 - 8 + 'px';
                    }
                });
            },
            cancel(){
                this.show = false;
                this.$emit('cancel');
            },
            confirm(){
                this.show = false;
                this.$emit('confirm');
            },
        },
    };
</script>

<style lang="scss">
    .edit-popup{
        position: fixed;min-width: 248px;padding: 15px;border: 1px solid #afb8bd;border-radius: 4px;text-align: left;background: #fff;
        .arrow{position: absolute;left: 50%;bottom: -16px;}
        .arrow:before,.arrow:after{content: '';position: absolute;left: 0;width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;}
        .arrow:before{border-top: 18px solid #afb8bd;bottom: -3px;}
        .arrow:after{border-top: 18px solid #fff;bottom: 0;}
        .c-btn{min-width: 0;margin-left: 14px;}
    }
</style>
